<template>
  <div class="regsiter">
    <h5>欢迎注册</h5>

    <yx-input
      v-model="username"
      placeholder="用户名"
      type="text"
      @blur="userBlur"
      :class="isUserTrue"
    >
      <template #text>
        <span class="text" v-show="isUserTrue == 'error'">必填</span>
      </template>
      <template #icon>
        <van-icon class="icon" name="graphic"></van-icon>
      </template>
    </yx-input>

    <yx-input v-model="imgCode">
      <template #img>
        <img @click="changeSrc" class="img" :src="imgSrc" alt="" />
      </template>
    </yx-input>
    <!-- 图形验证码 -->

    <yx-input @click="showPrivance = true" v-model="privanceValue"></yx-input>
    <!-- 省市区 点击的时候让省市区的弹出层显示 -->

    <yx-input v-model="smsValue">
      <template #button>
        <p class="button center" @click="getSmsValue">获取验证码</p>
        <p class="button center">{{}}秒后再试</p>
      </template>
    </yx-input>
    <!-- 短信验证码 -->

    <p class="center right-register">
      <span class="center" @click="register">立即注册</span>
    </p>

    <p class="change-login">已有账号？ 立即登陆</p>

    <van-popup
      v-model:show="showPrivance"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <!-- 事件	说明	回调参数
confirm	点击完成按钮时触发	result: ConfirmResult
cancel	点击取消按钮时触发 -->
      <van-area
        @confirm="confirm"
        @cancel="cancel"
        title="标题"
        :area-list="areaList"
        :columns-num="2"
      />
    </van-popup>
    <!-- 省市区的弹框 -->
  </div>
</template>
<script>
import yxInput from "@/components/yxInput.vue";
//input子组件
import { ref, reactive, toRefs } from "vue";
//组合api的方法
import { areaList } from "@vant/area-data";
//vant里的地区的数据

import { getSms, yxResigister } from "../../utils/http/personal";
//引入 获取短信验证码和 注册接口

export default {
  setup(props) {
    const username = ref("");
    //用户名
    const isUserTrue = ref("");
    //判断用户名是否正确

    const userBlur = () => {
      let reg = /^1[3,5,7,8,9][0-9]{9}$/;
      // if (username.value != "" && reg.test(username.value))
      //   isUserTrue.value = "success";
      // else isUserTrue.value = "error";

      isUserTrue.value =
        username.value != "" && reg.test(username.value) ? "success" : "error";
    };
    //用户名失去焦点的时候判断 正则 给isUserTrue赋值为success或者error
    //以上是手机号的代码

    const imgCode = ref("");
    //图形验证码的value
    const imgSrc = ref("");
    //图片路径
    const time = ref("");
    const changeSrc = () => {
      time.value = new Date().getTime();
      //获取时间戳
      imgSrc.value =
        "https://api.it120.cc/small4/verification/pic/get?key=" + time.value;
    };
    //定义 图片路径 拼接上一个时间戳

    changeSrc();
    //进入页面执行 会生成一个图片路径

    //以上图形验证码的代码

    const showPrivance = ref(false);
    //显示省市选择的底部弹框
    const privanceValue = ref("");
    //省市区的value值
    const privanceId = ref([]);
    const confirm = (res) => {
      console.log(res);
      privanceValue.value = res[0].name + " " + res[1].name;
      privanceId.value = [res[0].code, res[1].code];
      showPrivance.value = false;
    };
    //点击完成按钮触发

    const cancel = () => {
      showPrivance.value = false;
    };
    //点击取消按钮触发

    // 以上是省市区的代码

    const getSmsValue = () => {
      getSms({
        mobile: username.value,
        key: time.value,
        picCode: imgCode.value,
      }).then((res) => {
        console.log(res);
      });
    };

    //以上是短信验证码的代码

    const register = () => {
      yxResigister({
        mobile: username.value,
        pwd: "000000",
        nick: "小可爱",
        code: "123456",
        province: privanceId.value[0],
        city: privanceId.value[1],
      }).then((res) => {
        console.log(res);
      });
    };
    //立即注册的方法

    return {
      imgSrc,
      changeSrc,
      areaList,
      showPrivance,
      confirm,
      cancel,
      privanceValue,
      username,
      isUserTrue,
      userBlur,
      imgCode,
      getSmsValue,
      register,
      privanceId,
    };
  },
  components: {
    yxInput,
  },
};
</script>

<style lang="scss">
.regsiter {
  width: 340px;
  border: 1px solid #f5f5f5;
  padding: 32px;
  margin: 30px auto;
  box-sizing: border-box;
  .change-login {
    color: #549ff9;
    font-size: 15px;
    margin-top: 26px;
    text-align: center;
  }

  .right-register {
    margin-top: 22px;
    span {
      width: 210px;
      height: 50px;
      color: #fff;
      font-size: 14px;
      border-radius: 4px;
      background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
    }
  }
}
</style>
